<template>
  <div class="app-container">
    <router-view></router-view>
    <music-player :list="handleList" v-if="!$route.meta.hiddenPlayer"></music-player>
  </div>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()

    store.dispatch('updateInfor')
    const handleList = computed(() => {
      return store.state.playList.list.map(item => {
        return {
          id: item.songNo,
          name: item.songName,
          url: item.songUrl.url,
          singer: item.songerName,
          songerImg: item.songer.songerImg
        }
      })
    })
    return {
      handleList
    }
  }
}
</script>

<style lang="scss">
#app {
  height: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-fon-smoothing: grayscale;
}
.app-container {
  height: 100%;
  overflow-x: auto;
  // background: url('@/assets/userbg.jpg') no-repeat;
  // background-size: 100% 100%;
}
#nprogress .bar {
  background: $bar !important; //自定义颜色
}

#nprogress .spinner-icon {
  border-top-color: $bar !important;
  border-left-color: $bar !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px $bar, 0 0 5px $bar !important;
}
</style>
